import React, { Component } from 'react';

import '../styles/product.scss'

import pic18 from '../assets/18.gif'
import pic19 from '../assets/19.gif'
import pic20 from '../assets/20.gif'
import pic21 from '../assets/21.gif'

class Product extends Component {
    constructor(props) {
        super(props);
        //定义组件的状态
        this.state = {
            currentIndex: 0, //用来保存当前点击按钮的下标
            btns: [
                '综合', '销量', '新品', '价格', '筛选'
            ],
            shoplist: [
                { pic: pic18, name: '黛珂植物韵律化妆水', yuanjia: '原价￥270', xianjia: '活动价￥215' },
                { pic: pic19, name: '黛珂牛油果乳液', yuanjia: '原价￥273', xianjia: '活动价￥205' },
                { pic: pic20, name: '兰蔻化妆水', yuanjia: '原价￥320', xianjia: '活动价￥298' },
                { pic: pic21, name: '黛珂润唇膏', yuanjia: '原价￥170', xianjia: '活动价￥140' },
            ]
        }
    }
    handleClick(index) {
        this.setState({ currentIndex: index })
    }
    render() {
        return (
            <div className='product'>
                <div className="title">
                    {/* 按钮渲染 */}
                    {
                        this.state.btns.map((item, index) => {
                            return (
                                <div className={"btns " + (this.state.currentIndex == index ? 'active' : '')} key={index} onClick={() => { this.handleClick(index) }}>{item}</div>
                            )
                        })
                    }
                </div>
                <div className="shoplist">
                    {
                        this.state.shoplist.map((item, index) => {
                            return (
                                <div className="msg">
                                    <img src={item.pic} alt="" />
                                    <div className="name">{item.name}</div>
                                    <div className="yuanjia">{item.yuanjia}</div>
                                    <div className="xianjia">{item.xianjia}</div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Product;